<template>
	<view class="page">
		<uni-nav-bar left-icon="left" @clickLeft="back" backgroundColor="#3183FB" style="width: 100%;" :border="false"
			color="#fff" title="活动发布"></uni-nav-bar>
		<view class="background"></view>
		<view class="content">
			<!-- 顶部按钮 -->
			<view class="tab-bar">
				<view class="tab-item-l" :class="{ 'active': activeTab === '已上架' }" @click="changeTab('已上架')">
					已上架
				</view>
				<view class="tab-item-r" :class="{ 'active': activeTab === '未上架' }" @click="changeTab('未上架')">
					未上架
				</view>
			</view>
			<!-- 活动列表 -->
			<view class="activity-list">
				<view class="activity-item" v-for="activity in filteredActivities" :key="activity.id" @click="goToDetail(activity)">
					<view class="left-content">
						<view class="activity-title">{{ activity.title }}</view>
						<view class="status-tag" :class="activity.statusClass">
							{{ activity.reviewStatus }}
						</view>
						<view class="activity-time">{{ activity.time }}</view>
					</view>
					<view class="right-content">
						<view class="action-buttons">
							<view v-for="(btn, index) in getActions(activity)" :key="index" class="action-button"
								:class="btn.type" @click.stop="handleAction(btn.action, activity.id)">
								{{ btn.text }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<button class="publish-button" @click="goEventReleaseDetails">
			<image src="/static/加号@2x.png" style="width: 30rpx;height: 30rpx;margin-right: 20rpx;" mode=""></image>
			发布活动
		</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: '已上架',
				activitiesWithClass: [],
				activities: [{
						id: 1,
						title: '阳春三月油江南活动开始报名了',
						time: '2023-03-10 11:09',
						status: '已上架',
						reviewStatus: ''
					},
					{
						id: 2,
						title: '阳春三月油江南活动开始报名了',
						time: '2023-03-10 11:09',
						status: '未上架',
						reviewStatus: '审核中'
					},
					{
						id: 3,
						title: '阳春三月油江南活动开始报名了',
						time: '2023-03-10 11:09',
						status: '未上架',
						reviewStatus: '审核成功'
					},
					{
						id: 4,
						title: '阳春三月油江南活动开始报名了',
						time: '2023-03-10 11:09',
						status: '未上架',
						reviewStatus: '审核失败'
					}
				]
			}
		},
		onLoad() {
			// 假设activities是从接口获取的数据
			this.activities.forEach(activity => {
				let classNames = '';
				if (activity.reviewStatus === '审核中') {
					classNames = 'auditing';
				} else if (activity.reviewStatus === '审核成功') {
					classNames = 'success';
				} else if (activity.reviewStatus === '审核失败') {
					classNames = 'failed';
				}
				activity.statusClass = classNames;
				this.activitiesWithClass.push(activity);
			});
		},
		computed: {
			filteredActivities() {
				return this.activitiesWithClass.filter(item => item.status === this.activeTab);
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			changeTab(tab) {
				this.activeTab = tab;
			},
			goToDetail(activity) {
				uni.navigateTo({
					url: `/pages/activities/detail?id=${activity.id}&title=${activity.title}&time=${activity.time}&status=${activity.status}&reviewStatus=${activity.reviewStatus}`
				});
			},
			getStatusClass(status) {
				return {
					'auditing': status === '审核中',
					'success': status === '审核成功',
					'failed': status === '审核失败'
				};
			},
			getActions(activity) {
				if (activity.status === '已上架') {
					return [{
						text: '下架',
						action: 'offline',
						type: 'offline'
					}];
				}
				switch (activity.reviewStatus) {
					case '审核中':
						return [{
							text: '删除',
							action: 'delete',
							type: 'delete'
						}];
					case '审核成功':
						return [{
							text: '上架',
							action: 'online',
							type: 'online'
						}];
					case '审核失败':
						return [{
							text: '删除',
							action: 'delete',
							type: 'delete'
						}];
					default:
						return [];
				}
			},
			handleAction(action, id) {
				console.log(`执行操作：${action}，活动ID：${id}`);
				// 这里添加具体操作逻辑
			},
			goEventReleaseDetails() {
				uni.navigateTo({
					url: '/pages/activities/publish'
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #F7F7F7;
	}

	.page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.background {
		position: relative;
		background-color: #3183FB;
		width: 100%;
		height: 150rpx;
	}

	.content {
		top: -110rpx;
		position: relative;
		padding: 20rpx;
		background-color: white;
		border-radius: 20rpx;
		width: 90%;
		margin-bottom: 120rpx;
		/* 增加底部间距 */
	}

	.tab-bar {
		display: flex;
		justify-content:center;
		margin-bottom: 20px;
	}

	.tab-item-l {
		width: 22%;
		padding: 10px 20px;
		border-radius: 50rpx 0 0 50rpx ;
		cursor: pointer;
		background-color: #f2f2f2;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tab-item-r {
		width: 22%;
		padding: 10px 20px;
		border-radius: 0 50rpx 50rpx 0 ;
		cursor: pointer;
		background-color: #f2f2f2;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.active {
		background-color: #3183FB;
		color: white;
	}

	.activity-list {
		display: flex;
		flex-direction: column;
	}

	.activity-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.left-content {
		flex: 1;
	}

	.activity-title {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.activity-time {
		font-size: 14px;
		color: #666;
	}

	.right-content {
		display: flex;
		align-items: center;
	}

	.status-tag {
		width: 120rpx;
		margin: 20rpx 0;
		text-align: center;
		font-size: 14px;
		padding: 4px 8px;
		border-radius: 4px;
		margin-right: 10px;
	}

	.auditing {
		background-color: #FFF3EB;
		color: #FF5C00;
	}

	.success {
		background-color: #E6F7EE;
		color: #07C160;
	}

	.failed {
		background-color: #FFECEC;
		color: #FF2B2B;
	}

	.action-buttons {
		display: flex;

	}

	.action-button {
		padding: 5px 10px;
		border-radius: 3px;
		margin-left: 5px;
		cursor: pointer;
		text-align: center;
		width: 100rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 40rpx;
	}

	.online {
		background-color: #007aff;
		color: white;
	}

	.offline {
		background-color: #007aff;
		color: white;
	}

	.delete {
		background-color: #007aff;
		color: white;
		border: 1px solid #E5E5E5;
	}

	.publish-button {
		position: fixed;
		bottom: 160rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 60%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #3183FB;
		color: white;
		border-radius: 40rpx;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>